<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
 
<title>ActiveMQ Demo程序</title>
 
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="${pageContext.request.contextPath }/res/libs/jquery/jquery-1.9.1.js"></script>
<style type="text/css">
.h1 {
    margin: 0 auto;
}
 
#producer{
    width: 48%;
    border: 1px solid blue;
    height: 80%;
    align:center;
    margin:0 auto;
}
 
body{
    text-align :center;
} 
div {
    text-align :center;
}
textarea{
    width:80%;
    height:100px;
    border:1px solid gray;
}
button{
    background-color: rgb(62, 156, 66);
    border: none;
    font-weight: bold;
    color: white;
    height:30px;
}
</style>
<script type="text/javascript">
     
    function sendQueue(controller){
    	var $message = $("#message_queue");
        if($message.val()==""){
        	$message.css("border","1px solid red");
            return;
        }else{
        	$message.css("border","1px solid gray");
        }
        $.ajax({
            type: 'POST',
            url:"<%=basePath%>amq/queue/send",
            dataType:'text', 
            data:{"message":$message.val()},
            success:function(data){
                if(data=="suc"){
                    $("#status_queue").html("<font color=green>发送成功</font>");
                    setTimeout(clear,1000);
                }else{
                    $("#status_queue").html("<font color=red>"+data+"</font>");
                    setTimeout(clear,5000);
                }
            },
            error:function(data){
                $("#status_queue").html("<font color=red>ERROR:"+data["status"]+","+data["statusText"]+"</font>");
                setTimeout(clear,5000);
            }
             
        });
    }
    
    function sendTopic(controller){
    	var $message = $("#message_topic");
        if($message.val()==""){
        	$message.css("border","1px solid red");
            return;
        }else{
        	$message.css("border","1px solid gray");
        }
        $.ajax({
            type: 'POST',
            url:"<%=basePath%>amq/topic/send",
            dataType:'text', 
            data:{"message":$message.val()},
            success:function(data){
                if(data=="suc"){
                    $("#status_topic").html("<font color=green>发送成功</font>");
                    setTimeout(clear,1000);
                }else{
                    $("#status_topic").html("<font color=red>"+data+"</font>");
                    setTimeout(clear,5000);
                }
            },
            error:function(data){
                $("#status_topic").html("<font color=red>ERROR:"+data["status"]+","+data["statusText"]+"</font>");
                setTimeout(clear,5000);
            }
             
        });
    }
     
    function clear(){
        $("#status_topic").html("");
    }
 
</script>
</head>
 
<body>
    <h1>Hello ActiveMQ</h1>
    <div id="producer">
        <h2>Queue Producer</h2>
        <textarea id="message_queue"></textarea>
        <br>
        <button onclick="sendQueue()">发送的Queue</button>
        <br>
        <span id="status_queue"></span>
    </div>
    <div id="producer">
        <h2>Topic Producer</h2>
        <textarea id="message_topic"></textarea>
        <br>
        <button onclick="sendTopic()">发送的Topic</button>
        <br>
        <span id="status_topic"></span>
    </div>
</body>
</html>